<template>
  <div class="searchList-con">
    <div class="top-box">
      <div class="search-top">
        <a href="#" @click="back">
          <img src="imgs/icon-left.png" alt="">
        </a>
        <a class="input">
          <input type="text" placeholder="请输入搜索的商品" v-model.trim="searchValue" ref="input">
          <van-icon name="cross" @click="searchValue = ''" v-show="searchValue" />
        </a>
        <a @click="searchList">
          <img src="imgs/icon-search.png" alt="">
        </a>
      </div>
      <div class="search-bottom">
        <div class="bottom-item" @click="changeAction(0)" :class="{'action':action===0 }">综合</div>
        <div class="bottom-item" @click="changeAction(1)" :class="{'action':action===1 }">销量</div>
        <div class="bottom-item up-down" @click="changeAction(2)" :class="{'action':action===2 }">价格
          <div class="change-box" v-show="action===2">
            <span class="up" :class="{'action-top':isUp===true}" @click="changePrice(1)"></span>
            <span class="down" :class="{'action-bottom':isUp===false}" @click="changePrice(2)"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="noList-con" v-if="seletedProductList.length===0">
      <img src="imgs/nolist.png" alt="">
      <div class="text">未查询到商品</div>
    </div>
    <div class="w" v-else>
      <div class="product-item" v-for="(item,index) in seletedProductList" :key="index">
        <div class="img">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="product-msg">
          <div class="name">{{item.name}}</div>
          <div class="sale">
            {{item.sale}}
          </div>
          <div class="config">
            <div class="config-item" v-for="(configItem,index) in item.config" :key="index">
              <p>{{configItem.top}}</p>
              <p>{{configItem.bottom}}</p>
            </div>
          </div>
          <div class="price">
            ￥<span class="color">{{item.price}}</span>
          </div>
          <div class="comment">
            {{item.comment.one}}条评论 {{item.comment.two}}%满意
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SearchList',
  data() {
    return {
      searchValue: this.$route.query.keys,
      seletedList: [],
      action: 0,
      // 控制升序或者降序的显示
      isUp: true
    }
  },
  created() {
    this.getSearchList()
  },
  methods: {
    back() {
      this.$router.push('/search')
    },
    searchList() {
      if (this.searchValue === '') {
        this.$toast('搜索内容不能为空')
      } else {
        this.$router.push(`/list?keys=${this.searchValue}`)
        this.$store.commit('GETSELETEDLIST', this.searchValue)
      }
    },
    // 修改tab高光
    changeAction(num) {
      this.action = num
      if (num === 0) {
        this.$store.commit('GETSELETEDLIST', this.searchValue)
      } else if (num === 1) {
        this.$store.commit('XIAOLIANG')
      } else if (num === 2) {
        console.log(2)
      }
    },
    // 获取搜索的商品
    getSearchList() {
      this.$store.commit('GETSELETEDLIST', this.searchValue)
    },
    // 修改商品价格排序
    changePrice(num) {
      if (num === 1) {
        this.isUp = true
        this.$store.commit('CHANGEPRICE', 1)
      } else {
        this.isUp = false
        this.$store.commit('CHANGEPRICE', 2)
      }
    }
  },
  computed: {
    ...mapState(['seletedProductList'])
  }
}
</script>

<style lang="less" scoped>
.searchList-con {
  font-size: 28px;
  .action {
    color: #ff6700;
  }
  .top-box {
    position: sticky;
    top: 0;
    background-color: #f2f2f2;
    .search-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;
      padding: 0 45px;
      font-size: 28px;
      img {
        width: 50px;
        height: 50px;
      }
      .input {
        position: relative;
        .van-icon-cross {
          position: absolute;
          top: 50%;
          right: 25px;
          transform: translate(0, -50%);
          width: 35px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          background-color: #f6f6f6;
          border-radius: 20px;
        }
      }
      input {
        width: 500px;
        height: 50px;
        margin: 0 20px;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        color: black;
        text-indent: 30px;
      }
    }
    .search-bottom {
      display: flex;
      align-items: center;
      height: 72px;
      text-align: center;
      .bottom-item {
        width: 33.3%;
      }
      .up-down {
        position: relative;
        span {
          position: absolute;
          bottom: -20%;
          left: 65%;
          width: 0;
          height: 0;
          border: 10px solid transparent;
        }
        .up {
          top: -15%;
          border-bottom: 10px solid #bdbdbd;
        }
        .down {
          bottom: -20%;
          border-top: 10px solid #bdbdbd;
        }
        .action-top {
          border-bottom: 10px solid #ff6700;
        }
        .action-bottom {
          border-top: 10px solid #ff6700;
        }
      }
    }
  }
  .w {
    width: 720px;
    margin: 0 auto;
    .product-item {
      display: flex;
      justify-content: space-between;
      padding: 28px 0;
      .img {
        img {
          width: 253px;
          height: 253px;
        }
      }
      .product-msg {
        width: 100%;
        padding-left: 15px;
        .name {
          font-size: 32px;
        }
        .sale {
          margin-top: 10px;
          color: #ff4a00;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .config {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          .config-item {
            overflow: hidden;
            width: 33.3%;
            text-align: center;
            p {
              height: 32px;
            }
          }
        }
        .price {
          color: #ff4a00;
          margin: 15px 0 10px;

          .color {
            font-weight: 600;
            font-size: 38px;
          }
        }
        .comment {
          font-size: 24px;
          color: #999;
        }
      }
    }
  }
  .noList-con {
    text-align: center;
    padding: 30px 0;
    color: #515151;
    font-size: 32px;
    img {
      width: 200px;
      height: 200px;
      margin-bottom: 30px;
    }
  }
}
</style>
